<template>
  <div @click="jumpDetail">
    <div
      class="singleImg"
      v-if="postData.type==1 &&postData.cover.length>=1&&postData.cover.length<3"
    >
      <div class="left">
        <div class="title">{{postData.title}}</div>
        <div class="nickname">{{postData.user.nickname}} {{postData.comment_length}}跟帖</div>
      </div>
      <div class="right">
        <img :src="postData.cover[0].url" alt class="cover" />
      </div>
    </div>
    <div class="manyImg" v-if="postData.type==1 &&postData.cover.length>=3">
      <div class="title">{{postData.title}}</div>
      <div class="photo">
        <img :src="postData.cover[0].url" alt class="cover" />
        <img :src="postData.cover[1].url" alt class="cover" />
        <img :src="postData.cover[2].url" alt class="cover" />
      </div>
      <div class="nickname">{{postData.user.nickname}} {{postData.comment_length}}跟帖</div>
    </div>
    <div class="video" v-if="postData.type==2 &&postData.cover.length>=1">
      <div class="title">{{postData.title}}</div>
      <div class="play">
        <img :src="postData.cover[0].url" alt class="cover" />
        <span class="iconfont iconshipin"></span>
      </div>
      <div class="nickname">{{postData.user.nickname}} {{postData.comment_length}}跟帖</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["postData"],
  methods: {
    jumpDetail() {
      this.$router.push({
        //动态路由,路由index.js后面也得有:id
        path: "/postdetail?id=" + this.postData.id
      });
    }
  }
};
</script>

<style lang='less'>
.singleImg {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  .left {
    margin-top: 4.167vw;
    .title {
      font-size: 4.444vw;
      margin-left: 2.778vw;
    }
    .nickname {
      font-size: 3.611vw;
      color: #adadad;
      margin-top: 6.944vw;
      margin-left: 2.778vw;
    }
  }
  .right {
    img {
      display: block;
      height: 25vw;
      margin-top: 3.333vw;
      margin-bottom: 2.778vw;
    }
  }
}
.manyImg {
  .title {
    margin: 2.778vw 0;
  }
  .photo {
    display: flex;
    justify-content: space-between;
    img {
      width: 33%;
    }
  }
  .nickname {
    font-size: 3.611vw;
    color: #adadad;
    margin: 1.667vw;
    padding-bottom: 1.389vw;
    border-bottom: 1px solid #eeeeee;
  }
}
.video {
  .title {
    margin-top: 5px;
    font-size: 16px;
  }
  .play {
    position: relative;
    img {
      width: 100%;
    }
    .iconshipin {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 40px;
      background-color: #c8cbc6;
      border-radius: 50%;
    }
  }
  .nickname {
    font-size: 3.611vw;
    color: #adadad;
    margin: 1.667vw;
    padding-bottom: 1.389vw;
    border-bottom: 1px solid #eeeeee;
  }
}
</style>